<template>
  <div class="login">
    <el-container>
      <yLogin v-if="$route.path === '/yLogin'"/>
      <mLogin v-if="$route.path === '/mLogin'"/>
      <iLogin v-if="$route.path === '/login'"/>
      <img src="@/assets/img/login/login_3.png" class="login_logo"/>
      <div class="lang">
        <!-- <rsLangSelect></rsLangSelect> -->
      </div>
      <el-main>
        <div v-if="type === '0'">
          <section class="content" :class="loginType === 'pharmacy' ? 'ycontent' : 'mcontent'">
            <!-- <p class="explain">
          <img src="@/assets/img/font.png" alt />
        </p>-->
            <el-form style="padding-right: 20px" ref="form" :model="form" label-width="100px">
              <el-form-item prop="username" :label="$t('login.ac')" :rules="rules.username">
                <el-input v-model="form.username"></el-input>
              </el-form-item>
              <el-form-item prop="password" :label="$t('login.pw')" :rules="rules.password">
                <el-input type="password" v-model="form.password"></el-input>
              </el-form-item>
              <el-form-item help-text class="captchaCodeStyle" label-float label="验证码" prop="captchaCode"
                            :rules="rules.captchaCode" v-if="codeViewSwitch">
                <el-row :gutter="2" justify="space-between">
                  <el-col :span="10">
                    <el-input size="mini" v-model="form.captchaCode" prop="captchaCode" error-text
                              @keyup.enter.native="submit"></el-input>
                  </el-col>
                  <el-col :span="10">
                    <img :src="codeData.image" alt="验证码" class="codeImg" @click="handleCaptchaCode"/>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button style="width: 100%; font-size: 18px" round @click="submit" type="primary"
                           :loading="loginLoading">
                  {{ $t('login.login') }}
                </el-button>
              </el-form-item>
            </el-form>

            <div class="forget">
              <el-button @click="forget" type="text">{{ $t('login.forgetPs') }}？</el-button>
            </div>
          </section>
        </div>
        <forgetPasswordVue v-else/>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import {getCaptcha} from '@/api/login'
import forgetPasswordVue from './forgetPassword.vue'
import rsLangSelect from '@/components/rs-lang-select/index'
import yLogin from './loginBgList/yLogin'
import mLogin from './loginBgList/mLogin'
import iLogin from './loginBgList/Login'

const loginType = localStorage.getItem('type')
export default {
  data() {
    return {
      loginType: loginType,
      codeViewSwitch: false, // 验证码view开关
      loginLoading: false, // 登录加载
      type: '0', //0登录1修改密码
      active: 1,
      account: '',
      typeactive1: 0,
      typeactive2: 0,
      phone: '',
      email: '',
      code: '',
      accountForm: {
        account: ''
      },
      newForm: {
        verifycode: '',
        newpassword: ''
      },
      rules: {
        username: [
          {required: true, message: this.$t('login.acTip')},
          {min: 3, message: this.$t('login.langName')}
        ],
        captchaCode: [{required: true, message: '请填写验证码'}],
        password: [
          {required: true, message: this.$t('login.pwTip')},
          {min: 6, max: 20}
        ]
      },

      form: {
        username: '', //账户zhangsan123@163.com
        password: '', //密码123456
        isAgree: false, //是否记住密码,
        captchaCode: ''
      },
      codeData: {},
      formPwd: {
        userName: '', //账户zhangsan123@163.com
        passWord: '', //密码123456
        isAgree: false //是否记住密码,
      }
    }
  },
  components: {forgetPasswordVue, rsLangSelect, yLogin, mLogin, iLogin},
  created() {
    // 生产环境显示验证码, 开发环境不显示
    if (process.env.NODE_ENV === 'development') {
      this.codeViewSwitch = true
      this.handleCaptchaCode()
    } else {
      this.codeViewSwitch = true
      this.handleCaptchaCode()
    }
  },
  methods: {
    // 获取验证码
    handleCaptchaCode() {
      getCaptcha()
          .then((res) => {
            this.codeData = res.data
          })
          .catch((err) => console.log(err))
    },
    //登录
    submit() {
      this.loginLoading = true
      setTimeout(() => {
        this.loginLoading = false
      }, 1000)
      this.$refs.form.validate().then((result) => {
        if (result) {
          const postData = {
            ...this.form,
            captchaKey: this.codeData.key,
            tf: 2
          }
          if (!this.codeViewSwitch) {
            delete postData.captchaKey
          }
          this.$axios.post(this.$locat.sso_login, postData).then((data) => {
            console.log(data);
            if (data.code == 1) {
              this.$notify({
                message: this.$t('login.loginSuccess'),
                type: 'success'
              })

              this.$refs.form.resetFields()
              // this.$router.replace({name: 'Home'})
              this.$router.push('/')
            } else if (data.code == 10002) {
              this.type = '1'
            } else if (data.code == 10301 && this.codeViewSwitch) {
              this.handleCaptchaCode()
              this.form.captchaCode = ''
            } else if (data.code == 10302 && this.codeViewSwitch) {
              this.handleCaptchaCode()
              this.form.captchaCode = ''
            } else if (data.code == 19999 && this.codeViewSwitch) {
              this.handleCaptchaCode()
              this.form.captchaCode = ''
            } else {
              this.$notify({
                message: '出错, 请重新登录',
                type: 'error'
              })
              this.handleCaptchaCode()
              this.form.captchaCode = ''
            }
          })
        }
      })
    },
    changePassword() {
      this.$refs.formPwd.validate().then((result) => {
        if (result) {
          this.$axios
              .get(this.$locat.sso_changePassword, {
                params: {...this.formPwd, tf: 2}
              })
              .then((data) => {
                if (data.code == 1) {
                  this.$notify({
                    message: this.$t('login.editSuccess'),
                    type: 'success'
                  })
                  this.type = '0'
                }
              })
        }
      })
    },
    forget() {
      this.type = '2'
    },
    goBack() {
      this.type = '0'
      this.active = 1
    },
    next1() {
      // if (this.active++ > 2) this.active = 1;
      this.$refs['accountForm'].validate((valid) => {
        if (valid) {
          this.$axios
              .get(this.$locat.sso_getdetail, {
                params: {username: this.accountForm.account}
              })
              .then((data) => {
                if (data.code == 1) {
                  this.active = 2
                  this.phone = data.data.phone
                  this.email = data.data.email
                }
              })
        } else {
          return false
        }
      })
    },
    next2() {
      if (this.typeactive1 === 0 && this.typeactive2 === 0) {
        this.$notify.warning('请选择验证方式！')
      } else if (this.typeactive1 === 1) {
        this.$axios
            .get(this.$locat.sso_fromsms, {
              params: {username: this.accountForm.account}
            })
            .then((data) => {
              if (data.code == 1) {
                this.active = 3
              }
            })
      } else if (this.typeactive2 === 1) {
        this.$axios
            .get(this.$locat.sso_fromemail, {
              params: {username: this.accountForm.account}
            })
            .then((data) => {
              if (data.code == 1) {
                this.active = 3
              }
            })
      }
    },
    next3() {
      // if (this.active++ > 2) this.active = 1;
      this.$refs['newForm'].validate((valid) => {
        if (valid) {
          this.$axios
              .post(this.$locat.sso_reset, {
                username: this.accountForm.account,
                code: this.newForm.verifycode,
                password: this.newForm.newpassword
              })
              .then((data) => {
                if (data.code == 1) {
                  this.$notify.success(this.$t('login.editSuccess'))
                }
              })
        } else {
          return false
        }
      })
    },
    forward1() {
      this.active = 1
    },
    forward2() {
      this.active = 2
    },
    getMsgtype() {
      this.typeactive1 = 1
      this.typeactive2 = 0
    },
    getEamiltype() {
      this.typeactive2 = 1
      this.typeactive1 = 0
    }
  }
}
</script>
<style lang="scss">
@import '@/assets/css/login.scss';

.lang {
  position: absolute;
  right: 40px;
  top: 50px;
}

.ycontent {
  right: 198px !important;
}

.mcontent {
  left: 100px !important;
}
</style>
